<template>
  <div class="content">
    <div class="content_echarts mt-20">
      
      <div ref="chartRef" style="width: 100%; height: 100%;"></div>
    </div>
    <div class="content_echarts mt-20">
      <div ref="chartRef1" style="width: 100%; height: 100%;"></div>
    </div>
    <div class="content_echarts mt-20" >
      <div ref="chartRef2" style="width: 100%; height: 100%;"></div>
    </div>
    <div class="content_echarts mt-20">
      <div ref="chartRef3" style="width: 100%; height: 100%;"></div>
    </div>

  </div>
</template>
<script setup>
import * as echarts from "echarts";
import { useEcharts } from "@/hooks/useECharts";
import {chargeNowOrderVoltage,chargeElectricCurrentVoltage,chargeTemperatureVoltage,chargeSocVoltage } from "@/api/modules/powerStation";
const getData = (params) => {
  // console.log(params);
  getvoltage();
  electricCurrentVoltage();
  temperatureVoltage();
  socVoltage();
};

// 电压折线图
const chartRef = ref();
// 获取电压折线图数据
const getvoltage = async () => {
  const { data } = await chargeNowOrderVoltage();
  const myChart = echarts.init(chartRef.value);
  const options =  {
    title: {
      text: "电压（V）",
      textStyle: {
        color: "#7e7e7e",
        fontSize: 12,
        fontWeight:400
      },
      left:'30px',
      top: '10px'
    },
    color: ["#03BF8F", "#F56D1C"],
	legend: {
    show: true,
		right: "30px",
		top: "10px",
		textStyle: {
			color: '#333',
			fontSize: 12,
			fontWeight: 400
		},
    data: [
        { name: "需求电压", icon: "rect" },
        { name: "实际电压", icon: "rect" },
      ],
      itemWidth: 10,
      itemHeight: 10,
	},
    tooltip: {
      show: true,
      triggerOn: "mousemove",
      trigger: "axis",
    },
    dataZoom: [
        {
            show: true,
            height: 10,
            bottom: 10,
            start: 0,
            end: 50,
            borderColor: 'transparent',
            borderCap: 'round',
            xAxisIndex: [0],
            fillerColor: '#F56D1C',
            borderColor: '#F56D1C',
            backgroundColor: '#E6E8EB',
            borderColor:'none',
            showDataShadow: false,
            brushSelect: false,
            showDetail: false,
            filterMode: "empty",
				    handleSize: "92%",
				    borderRadius: 100,
				    handleStyle: {
					    borderWidth: "none"
				    },
				    handleColor: "#F56D1C",
				    // 通过svg画图形 这个路径是圆
				    handleIcon: "path://M512,512m-448,0a448,448,0,1,0,896,0a448,448,0,1,0,-896,0Z",
        },
        {
            type: 'inside',
            zoomOnMouseWheel:false,
            moveOnMouseMove:false,
            moveOnMouseWheel:false,
        },
    ],
    yAxis: {
        show: true,
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
          alignWithLabel: true,
        },
        type: 'value',
        nameTextStyle: {
            color: '#333',
            fontSize: 12,
        },
        axisLabel: {
            formatter: '{value}',
            color: '#333',
        },
        splitLine: {
            show: true,
            lineStyle: {
                type: 'solid',
                color: '#e6e8eb',
                width: 1,
            },
        },
    },
    xAxis: {
        show: true,
        axisLine: {
          show: false, //隐藏X轴轴线
        },
        axisTick: {
          show: false, //隐藏X轴刻度
          alignWithLabel: true,
        },
        nameTextStyle: {
            color: '#333',
            fontSize: 12,
        },
        axisLabel: {
            formatter: '{value}',
            color: '#333',
        },
        data: data.date,
    },
    series: [
        {
            name: "需求电压",
            type: 'line',
            smooth: true,
            symbolSize: 10,
            data: data.shiji,
        },
        {
            name: "实际电压",
            type: 'line',
            smooth: true,
            symbolSize: 10,
            data: data.xuqiu,
        },
    ],
}
  useEcharts(myChart, options);

};
// 电流折线图
const chartRef1 = ref();
// 获取电流折线图数据
const electricCurrentVoltage = async () => {
  const { data } = await chargeElectricCurrentVoltage();
  const myChart = echarts.init(chartRef1.value);
  const options =  {
    title: {
      text: "电流（A）",
      textStyle: {
        color: "#7e7e7e",
        fontSize: 12,
        fontWeight:400
      },
      left:'30px',
      top: '10px'
    },
    color: ["#03BF8F", "#F56D1C"],
    legend: {
      show: true,
      right: "30px",
      top: "10px",
      textStyle: {
        color: '#333',
        fontSize: 12,
        fontWeight: 400
      },
      data: [
          { name: "需求电流", icon: "rect" },
          { name: "实际电流", icon: "rect" },
        ],
        itemWidth: 10,
        itemHeight: 10,
    },
    tooltip: {
      show: true,
      triggerOn: "mousemove",
      trigger: "axis",
    },
    dataZoom: [
        {
            show: true,
            height: 10,
            bottom: 10,
            start: 0,
            end: 50,
            borderColor: 'transparent',
            borderCap: 'round',
            xAxisIndex: [0],
            fillerColor: '#F56D1C',
            borderColor: '#F56D1C',
            backgroundColor: '#E6E8EB',
            borderColor:'none',
            showDataShadow: false,
            brushSelect: false,
            showDetail: false,
            filterMode: "empty",
				    handleSize: "92%",
				    borderRadius: 100,
				    handleStyle: {
					    borderWidth: "none"
				    },
				    handleColor: "#F56D1C",
				    // 通过svg画图形 这个路径是圆
				    handleIcon: "path://M512,512m-448,0a448,448,0,1,0,896,0a448,448,0,1,0,-896,0Z",
        },
        {
            type: 'inside',
            zoomOnMouseWheel:false,
            moveOnMouseMove:false,
            moveOnMouseWheel:false,
        },
    ],
    yAxis: {
        show: true,
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
          alignWithLabel: true,
        },
        type: 'value',
        nameTextStyle: {
            color: '#333',
            fontSize: 12,
        },
        axisLabel: {
            formatter: '{value}',
            color: '#333',
        },
        splitLine: {
            show: true,
            lineStyle: {
                type: 'solid',
                color: '#e6e8eb',
                width: 1,
            },
        },
    },
    xAxis: {
        show: true,
        axisLine: {
          show: false, //隐藏X轴轴线
        },
        axisTick: {
          show: false, //隐藏X轴刻度
          alignWithLabel: true,
        },
        nameTextStyle: {
            color: '#333',
            fontSize: 12,
        },
        axisLabel: {
            formatter: '{value}',
            color: '#333',
        },
        data: data.date,
    },
    series: [
        {
            name: "需求电流",
            type: 'line',
            smooth: true,
            symbolSize: 10,
            data: data.shiji,
        },
        {
            name: "实际电流",
            type: 'line',
            smooth: true,
            symbolSize: 10,
            data: data.xuqiu,
        },
    ],
}
  useEcharts(myChart, options);
};
// 温度折线图
const chartRef2 = ref();
const temperatureVoltage = async () => {
  const { data } = await chargeTemperatureVoltage();
  const myChart = echarts.init(chartRef2.value);
  const options =  {
    title: {
      text: "温度（℃）",
      textStyle: {
        color: "#7e7e7e",
        fontSize: 12,
        fontWeight:400
      },
      left:'30px',
      top: '10px'
    },
    color: ["#F56D1C"],
    legend: {
      show: true,
      right: "30px",
      top: "10px",
      textStyle: {
        color: '#333',
        fontSize: 12,
        fontWeight: 400
      },
      data: [
          { name: "最高动力储电池温度", icon: "rect" },
        ],
        itemWidth: 10,
        itemHeight: 10,
    },
    tooltip: {
      show: true,
      triggerOn: "mousemove",
      trigger: "axis",
    },
    dataZoom: [
        {
            show: true,
            height: 10,
            bottom: 10,
            start: 0,
            end: 50,
            borderColor: 'transparent',
            borderCap: 'round',
            xAxisIndex: [0],
            fillerColor: '#F56D1C',
            borderColor: '#F56D1C',
            backgroundColor: '#E6E8EB',
            borderColor:'none',
            showDataShadow: false,
            brushSelect: false,
            showDetail: false,
            filterMode: "empty",
				    handleSize: "92%",
				    borderRadius: 100,
				    handleStyle: {
					    borderWidth: "none"
				    },
				    handleColor: "#F56D1C",
				    // 通过svg画图形 这个路径是圆
				    handleIcon: "path://M512,512m-448,0a448,448,0,1,0,896,0a448,448,0,1,0,-896,0Z",
        },
        {
            type: 'inside',
            zoomOnMouseWheel:false,
            moveOnMouseMove:false,
            moveOnMouseWheel:false,
        },
    ],
    yAxis: {
        show: true,
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
          alignWithLabel: true,
        },
        type: 'value',
        nameTextStyle: {
            color: '#333',
            fontSize: 12,
        },
        axisLabel: {
            formatter: '{value}',
            color: '#333',
        },
        splitLine: {
            show: true,
            lineStyle: {
                type: 'solid',
                color: '#e6e8eb',
                width: 1,
            },
        },
    },
    xAxis: {
        show: true,
        axisLine: {
          show: false, //隐藏X轴轴线
        },
        axisTick: {
          show: false, //隐藏X轴刻度
          alignWithLabel: true,
        },
        nameTextStyle: {
            color: '#333',
            fontSize: 12,
        },
        axisLabel: {
            formatter: '{value}',
            color: '#333',
        },
        data: data.date,
    },
    series: [
        {
            name: "最高动力储电池温度",
            type: 'line',
            smooth: true,
            symbolSize: 10,
            data: data.dreeg,
        },
    ],
}
  useEcharts(myChart, options);
};
// soc折线图
const chartRef3 = ref();
const socVoltage = async () => {
  const { data } = await chargeSocVoltage();
  const myChart = echarts.init(chartRef3.value);
  const options =  {
    title: {
      text: "SOC",
      textStyle: {
        color: "#7e7e7e",
        fontSize: 12,
        fontWeight:400
      },
      left:'30px',
      top: '10px'
    },
    color: ["#F56D1C"],
    legend: {
      show: true,
      right: "30px",
      top: "10px",
      textStyle: {
        color: '#333',
        fontSize: 12,
        fontWeight: 400
      },
      data: [
          { name: "SOC", icon: "rect" },
        ],
        itemWidth: 10,
        itemHeight: 10,
    },
    tooltip: {
      show: true,
      triggerOn: "mousemove",
      trigger: "axis",
    },
    dataZoom: [
        {
            show: true,
            height: 10,
            bottom: 10,
            start: 0,
            end: 50,
            borderColor: 'transparent',
            borderCap: 'round',
            xAxisIndex: [0],
            fillerColor: '#F56D1C',
            borderColor: '#F56D1C',
            backgroundColor: '#E6E8EB',
            borderColor:'none',
            showDataShadow: false,
            brushSelect: false,
            showDetail: false,
            filterMode: "empty",
				    handleSize: "92%",
				    borderRadius: 100,
				    handleStyle: {
					    borderWidth: "none"
				    },
				    handleColor: "#F56D1C",
				    // 通过svg画图形 这个路径是圆
				    handleIcon: "path://M512,512m-448,0a448,448,0,1,0,896,0a448,448,0,1,0,-896,0Z",
        },
        {
            type: 'inside',
            zoomOnMouseWheel:false,
            moveOnMouseMove:false,
            moveOnMouseWheel:false,
        },
    ],
    yAxis: {
        show: true,
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
          alignWithLabel: true,
        },
        type: 'value',
        nameTextStyle: {
            color: '#333',
            fontSize: 12,
        },
        axisLabel: {
            formatter: '{value}',
            color: '#333',
        },
        splitLine: {
            show: true,
            lineStyle: {
                type: 'solid',
                color: '#e6e8eb',
                width: 1,
            },
        },
    },
    xAxis: {
        show: true,
        axisLine: {
          show: false, //隐藏X轴轴线
        },
        axisTick: {
          show: false, //隐藏X轴刻度
          alignWithLabel: true,
        },
        nameTextStyle: {
            color: '#333',
            fontSize: 12,
        },
        axisLabel: {
            formatter: '{value}',
            color: '#333',
        },
        data: data.date,
    },
    series: [
        {
            name: "SOC",
            type: 'line',
            smooth: true,
            symbolSize: 10,
            data: data.soc,
        },
    ],
}
  useEcharts(myChart, options);
};

defineExpose({
  getData,
});
</script>

<style lang="scss" scoped>
.content {
  &_echarts{
    height: 500px;
    border-radius: 4px;
    border: 1px solid #cdcbcb;
  }
}
</style>
